<template>
  <a :class="[isSend==true?'on btn':'btn']" href="javascript:;" @click="send">{{text}}</a>
</template>

<script>
export default {
  name: 'sms',
  data(){
    return{
      text:'获取验证码',
      isSend:false,
      seconds:60,
      timer:null
    }
  },
  props: {
    getCode:Function
  },
  methods:{
    send(){
      if(!this.isSend){
        this.isSend=true
        if(this.getCode()){
          this.text=this.seconds+'秒后重发'
          this.timer=setInterval(()=>{
            this.seconds--
            this.text=this.seconds+'秒后重发'
            if(this.seconds<1){
              clearInterval(this.timer)
              this.seconds=60
              this.text="获取验证码"
              this.isSend=false
            }
          },1e3)
        }else{
          this.isSend=false
        }
      }
    }
  },
  mounted(){
    
  }
}
</script>

<style lang="less" scoped>
.btn{
  width: 2.4rem;
  border-radius: 0.15rem;
  &.on{
    background: #999;
  }
}
</style>
